<template>
	<view class="main-page">
		<view class="swiper-container">
			<u-swiper :list="banners"  keyName="image" height="260"></u-swiper>
		</view>
		<u-gap height="220" ></u-gap>
		<view class="warp">
			<view class="category-container">
				<view class="category-item" v-for="item,index in categorys" :key="index" @tap="toAddOrder(item.id)">
					<view class="image">
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="text">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="cases-container">
				<view class="title">
					精选案例
				</view>
				<view class="lists">
					<view class="items items-left">
						<view class="item" v-for="item,index in cases" :key="index" v-if="index%2 == 0">
							<view class="image">
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class="text">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="items items-right">
						<view class="item"  v-for="item,index in cases" :key="index" v-if="index%2 == 1">
							<view class="image">
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class="text">
								{{item.title}}
							</view>
						</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { get_banner, productCategory, productCases } from '@/common/api'
	
	export default {
		data() {
			return {
				banners: [],
				categorys: [],
				cases: []
			}
		},
		onLoad(){
			this.getBanner()
			this.getCategory()
			this.getCaces()
			uni.onTabBarMidButtonTap(() => {
				this.toOrder()
			})
		},
		methods: {
			getBanner(){
				get_banner({mark: 'index-banner'}).then(res => {
					res.lists.forEach(item => {
						item.image = this.$store.state.$siteConfig.cdnUrl + item.image
					})
					this.banners = res.lists
				})
			},
			getCategory(){
				productCategory().then(res => {
					res.forEach(item => {
						item.icon = this.$store.state.$siteConfig.cdnUrl + item.icon
					})
					this.categorys = res
				})
			},
			getCaces(){
				productCases().then(res => {
					res.forEach(item => {
						item.image = this.$store.state.$siteConfig.cdnUrl + item.image
					})
					this.cases = res
				})
			},
			toAddOrder(id){
				uni.navigateTo({
					url: '/pages/home/addOrder?cate_id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container { position: fixed;top: 0;left:0; right:0 }
	.warp { position: relative; z-index: 1; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;}
	.category-container { background-color: #fff; display: flex;  width: 720rpx; margin: 15rpx; padding: 50rpx 0; border-radius: 15rpx;}
	.category-container .category-item { width: 20%; }
	.category-container .category-item .image { display: flex; justify-content: center; }
	.category-container .category-item .image image { width: 80rpx; height: 80rpx; border-radius: 100%;}
	.category-container .category-item .text { text-align: center; font-size: 28rpx; padding-top: 10rpx;} 
	
	.cases-container {
		.title {
			background-image: url(/static/images/index_title_bg_03.png);
			background-size: auto;
			background-position: center;
			height: 40px;
			background-color: #ffffff;
			background-repeat: no-repeat;
			line-height: 40px;
			text-align: center;
			font-weight: bold;
			margin:25rpx 15rpx;
			border-radius: 15rpx;
		}
		.lists { 
			display: flex; justify-content: space-between; padding: 0 15rpx;
			.items {
				width: 355rpx;
				.item {
					display: flex; justify-content: center; padding-bottom: 15rpx;
					.image { 
						width: 100%; 
						image { width: 100%;  border-radius: 15rpx; overflow: hidden;}
					}
				}
			}
		}
	}
	
</style>
